
<template>
    <div style="width:100%">
        <div style="height:590px;width:100%;position:relative;">
            <div class="pagetop">
                <table class="table1style" style="width:100%">
                    <tr>
                        <td>
                            <el-checkbox true-label="1" false-label="0" v-model="listcolObj.localflag" disabled>宽度和顺序本地设置</el-checkbox>
                        </td>
                        <td>修改人</td>
                        <td>
                            <el-input v-model="listcolObj.modifyuser" placeholder="" ref="refsearch" :clearable="true" style="width:100px" disabled></el-input>
                        </td>
                        <td>修改时间</td>
                        <td>
                            <el-input v-model="listcolObj.modify_dt" placeholder="" ref="refsearch" :clearable="true" style="width:120px" disabled></el-input>
                        </td>
                        <td align="right">
                            <el-button @click="listcolsave" icon="el-icon-success">确 定</el-button>
                            <el-button @click.native="listcolcancel" icon="el-icon-error">取 消</el-button>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="pagecenter">
                <div class="middle-center">
                    <vxe-table show-overflow border ref="listcolxTable" height="auto" size="mini" :select-config="{reserve: true}" :mouse-config="{selected: true}" @current-change="currentChangeEvent" :data.sync="ListColData" show-header-overflow highlight-current-row highlight-hover-row resizable stripe header-align="center" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,showIcon:true}">
                        <!-- <vxe-table-column type="index" title="NO." width="40" align="center"></vxe-table-column> -->
                        <vxe-table-column field="colx" title="顺序" width="50" :edit-render="{name:'input', autoselect: true}"></vxe-table-column>
                        <vxe-table-column field="visibled" title="显示" width="50" align="center">
                            <template v-slot="{row}">
                                <el-checkbox true-label="1" false-label="0" v-model="row.visibled" disabled></el-checkbox>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="colcode" title="列代码" width="100"></vxe-table-column>
                        <vxe-table-column field="colname" title="列名称" width="110"></vxe-table-column>
                        <vxe-table-column field="usercolname" title="自定义列名" width="100" :edit-render="{name:'input', autoselect: true}"></vxe-table-column>
                        <vxe-table-column field="exportcol" title="导出列" width="60" align="center">
                            <template v-slot="{row}">
                                <el-checkbox true-label="1" false-label="0" v-model="row.exportcol"></el-checkbox>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="displayformat" title="显示格式" width="100"></vxe-table-column>
                        <vxe-table-column field="colwidth" title="宽度" width="80"></vxe-table-column>
                        <vxe-table-column field="prgno" title="程序代号" width="80"></vxe-table-column>
                    </vxe-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
export default {
    props: {
        PageColData: { type: Array },
        // value: { type: String },
        // authflag: { type: String, default: "0" },
    },
    data() {
        return {
            ListColData: [],
            // prgcode: "",
            // prgname: "",
            // txtsearch: "",
            listcolObj: {},
        };
    },
    created() {
        // console.log("as",this.PageColData);
        this.InitPage(); //初始化主列表
    },
    watch: {},
    computed: {
        // list() {
        //     let filterName = this.txtsearch.trim();
        //     if (filterName) {
        //         let filterRE = new RegExp(filterName, "gi");
        //         let rest = this.ListColData.filter((item) => {
        //             return item.prgcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.prgname ? item.prgname.indexOf(filterName) > -1 : false);
        //         });
        //         return rest;
        //     } else {
        //         return this.ListColData;
        //     }
        // },
    },
    mounted() {},
    updated() {
        //    this.ListColDialog = this.ListColDialog;
        //    if(this.$refs.refsearch) this.$refs.refsearch.focus();
    },
    methods: {
        currentChangeEvent({ row, column }) {},
        listcolsave() {
            this.$tool
                .request({
                    url: "/ucent/liscomm",
                    method: "post",
                    data: {
                        action: "listcolsave",
                        listcoldet: this.$refs.listcolxTable.tableData, //getRecordset(),
                        ...this.listcolObj,
                    },
                })
                .then((res) => {
                    if (res.errcode == "1") {
                        this.$pub.message(this, "保存成功！", "success");
                        this.listcolObj.modifyuser = res.mainlistcol[0].username;
                        this.listcolObj.modify_dt = res.mainlistcol[0].modify_dt;
                        this.InitPage();
                    } else {
                        this.$alert(res.errmsg, "提示");
                    }
                })
                .catch((e) => {
                    console.log("error", e);
                });
        },
        listcolcancel() {
            this.$emit("cancel", "");
        },
        InitPage() {
            this.$tool
                .request({
                    url: "/ucent/ddl",
                    method: "post",
                    data: {
                        action: "getListCol",
                    },
                })
                .then((res) => {
                    if (res.data.length > 0) {
                        this.ListColData = res.data;
                    } else {
                        let buildcolumn = [];
                        this.PageColData.forEach((item, index) => {
                            buildcolumn.push({ colname: item.title, colcode: item.field, visibled: "1", usercolname: "", exportcol: "1", colx: (index + 1) * 10, colwidth: item.width });
                        });
                        this.ListColData = buildcolumn;
                    }
                    this.addcol();
                    this.ListColDialog = false;
                })
                .catch((e) => {
                    this.$alert(e,"出错");
                });
        },
        addcol(){
            if(this.ListColData.findIndex(m=>m.colcode=="lotno")==-1){
  this.ListColData.push({ colname: "批号", colcode: "lotno",visibled:"0",usercolname:"",exportcol: "0",colx:"370",colwidth: "100" });
            }
            if(this.ListColData.findIndex(m=>m.colcode=="expirtydate")==-1){
this.ListColData.push({ colname: "效期", colcode: "expirtydate",visibled:"0",usercolname:"",exportcol: "0",colx:380, colwidth: "120" });
            }
             if(this.ListColData.findIndex(m=>m.colcode=="sendqty")==-1){
this.ListColData.push({ colname: "发货数量", colcode: "sendqty",visibled:"0",usercolname:"",exportcol: "0",colx:390, colwidth: "120" });
            }
        }
       
    },
};
</Script>

<style scoped>
.pagecenter {
    position: absolute;
    top: 40px;
    width: 100%;
    left: 0;
    right: 0px;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.pagebottom {
    position: absolute;
    -webkit-box-pack: center;
    -webkit-box-align: bottom;
    bottom: 0px;
    width: 100%;
    height: 40px;
    right: 0px;
    border: 1px solid #ccc;
}
.table1style tr td {
    padding: 3px 2px 3px 5px;
}
</style>
